<template>
    <div style="height: 100%; max-height: 100%" class="h5subjectsBoxs">
      <navconH5 :leftShow="true" texts="工作人员管理"></navconH5>
      <div
        class="example-search" 
        style="background-color: rgba(255, 255, 255, 0); padding: 10px"
      >
        <t-search
          placeholder="工作人员名称"
          style="width: 100%"
          v-model="formInline.username"
          @blur="search"
          @clear="search"
        ></t-search>
        <div class="addViewstop" @click="endlist()" v-if="authority([2,3])">新建 <span>+</span></div>
      </div>
      <div class="cut">
        <div class="cut_text_one">{{ cut ? "线上" : "在地" }}工作人员</div>
        <div class="cut_sw"  v-if="authority([1])">
          <div
            class="cut_sw_no"
            :class="cut ? 'cut_sw_ok' : ''"
            @click="cuttab(true)"
          >
            线上
          </div>
          <div
            class="cut_sw_no"
            :class="!cut ? 'cut_sw_ok' : ''"
            @click="cuttab(false)"
          >
            在地
          </div>
        </div>
      </div>
      <div class="subiectsList" ref="scrollContainer" @scroll="handleScroll">
        <div
          class="subiectsList_boxs"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div style="width: 100%; display: flex">
            <div class="subiectsList_boxs_twos">
              <t-avatar
                class="avatar-example external-class-content"
                aria-label="字符头像"
              >
                {{ item.username[0] }}</t-avatar
              >
              <div class="subiectsList_boxs_ones">
                <p class="subiectsList_boxs_text" style="display: flex;align-items: center;">
                  {{ item.username }} <el-button v-if="cut&&item.is_qstatus" size="small" type="primary" plain @click="manageMag" text >
                <el-icon  ><Flag /></el-icon></el-button
              >
                </p>
                <p class="subiectsList_boxs_mobile">{{ item.mobile }}</p>
              </div>
            </div>
  
            <div class="right_icons_list"  v-if="authority([2,3])">
              <div class="right_icons_list_item">
                <el-icon class="item_icon" @click="endlist(item)"
                  ><EditPen
                /></el-icon>
              </div>
              <div class="right_icons_list_item right_icons_list_item2">
                <el-icon class="item_icon item_icon2" @click="deletes(item)"
                  ><CircleCloseFilled
                /></el-icon>
              </div>
            </div>
          </div>
          <div class="listfooter">
            <div class="listfooter_view">
              <span class="listfooter_view_tag"> 创建日期:</span>
              {{ item.createtime }}
            </div>
            <div class="listfooter_view">
              <span class="listfooter_view_tag"> 更新日期: </span>
              {{ formatDateTime(item.updatetime) }}
            </div>
          </div>
        </div>
        <!-- 加载提示 -->
        <div v-if="isLoading" class="loading-text">加载中...</div>
        <div v-if="isEnd" class="loading-text">没有更多数据了</div>
      </div>
      <staffShow ref="listShows" :titles="cuttext()" @endlists="addlists"></staffShow>
    </div>
  </template>
        
  <script setup>
  import { ref, reactive, onMounted, inject } from "vue";
  import navconH5 from "@/components/navconH5.vue";
  import { Message } from "tdesign-mobile-vue";
  import { useRouter, useRoute } from "vue-router";
  import { useMutitabsStore } from "@/store/mutitabs";
  import {
    rstaffList,
    rstaffDel,
    rstaffAdd,
    rstaffUpdate,
  } from "@/api/api"; //在线
  import {
    staffList,
    staffDel,
    staffAdd,
    staffUpdate,
  } from "@/api/api"; //在地
 
  import { setStorage, getStorage } from "@/utils/util";
  import dayjs from "dayjs";
  
  import staffShow from "@/components/h5com/shool/staffShow.vue";
  const route = useRoute(); // 使用 useRoute 获取当前路由信息
  const router = useRouter(); //获取当前路由
  const $dialog = inject("$dialog");
  const info = JSON.parse(getStorage("userinfo"));
  const userId = Number(JSON.parse(getStorage("userId"))); 
  const userInfo = ref(Number(JSON.parse(getStorage("groupId")))); //权限
  const formInline = ref({ page: 1, per_page: 20 }); //数据引用分页
  const Twostab = ref({ page: 1, per_page: 20, total: 0 }); //重置数据分页
  const isLoading = ref(false);
  const isEnd = ref(false);
  const tableData = ref([]); //列表数据
  const scrollContainer = ref(null); // 滚动容器
  const listShows = ref(null); //弹窗
  const cut = ref(true); //线上or线下
  const cuttext=()=>{
      return cut.value ? "线上工作人员" : "在地工作人员";
  } 

  const authority = (groupArr = [0]) => {
  // 权限筛选
  let userInfos = userInfo.value;
  // 当前权限和传来的权限组进行对比
  if (groupArr.some((item) => Number(item) === userInfos)) return true;
  return false;
};

 if(authority([2])) cut.value = false;
 if(authority([3])) cut.value = true;


  // 获取数据
  const getdata = () => {
    if (isLoading.value || isEnd.value) return; // 防止重复加载
    isLoading.value = true;
    let userList = cut.value ? rstaffList : staffList;
    userList(formInline.value)
      .then((res) => {
        if (res.code == 1) {
          if (res.data.data.length === 0) {
            isEnd.value = true; // 没有更多数据
          } else {
            tableData.value = [...tableData.value, ...res.data.data]; // 追加数据
            formInline.value.page++; // 增加分页
          }
        }
      })
      .finally(() => {
        isLoading.value = false;
      });
  };
  const cuttab = (val) => {
    // 线上线下按钮切换
    cut.value = val;
    search();
  };
  const formatDateTime = (time) => {
    return dayjs.unix(time).format("YYYY-MM-DD HH:mm");
  };
  // 搜索
  const search = () => {
    formInline.value = { ...formInline.value, ...Twostab.value };
    tableData.value = []; // 清空旧数据
    isEnd.value = false; // 重置加载状态
    getdata();
  };
  const endlist = (row) => {
    listShows.value.showends(row, row ? "编辑" : "新增");
  };
  // 删除
  const deletes = (row) => {
    $dialog.confirm({
      title: "删除警告",
      content: `是否删除${row.username}？`,
      confirmBtn: { content: "确认", theme: "danger" },
      cancelBtn: "取消",
      onConfirm: () => {
        let userDel = cut.value ? rstaffDel : staffDel;
        userDel({ id: row.id })
          .then((res) => {
            if (res.code == 1) {
              Message.success({
                content: "删除成功",
                placement: "center",
              });
              search();
            }
          })
          .catch((error) => {
            console.log(error, "-------报错");
          });
      },
    });
  };
  const addlists = (row) => {
    //    添加或者编辑
    let objs = row;
    if (row.id) {
      objs.id = row.id;
      let userUpdate = cut.value ? rstaffUpdate  : staffUpdate;
      userUpdate(objs)
        .then((res) => {
          if (res.code == 1) {
            console.log("编辑成功");
            let index = tableData.value.findIndex((item) => item.id == objs.id);
            // 赋值数据 新数据覆盖旧数据
            tableData.value[index] = { ...tableData.value[index], ...objs };
            Message.success(res.msg);
            // search();
          } else {
            Message.error(res.msg);
          }
        })
        .catch((error) => {
          Message.error("操作失败！");
        });
    }
    if (!row.id) {
      let userAdd = cut.value ? rstaffAdd : staffAdd;
      userAdd(objs)
        .then((res) => {
          if (res.code == 1) {
            console.log("添加成功");
            Message.success(res.msg);
            search();
          } else {
            Message.error(res.msg);
          }
        })
        .catch((error) => {
          Message.error("操作失败！");
        });
    }
  };
  
  // 触底加载
  const handleScroll = () => {
    const container = scrollContainer.value;
    if (container) {
      const { scrollTop, clientHeight, scrollHeight } = container;
      if (
        scrollTop + clientHeight >= scrollHeight - 10 &&
        !isLoading.value &&
        !isEnd.value
      ) {
        getdata();
      }
    }
  };
  
  // 初始化加载数据
  onMounted(() => {
    getdata();
  });
  </script>
        
        <style scoped lang="scss">
  .example-search {
    display: flex;
    align-items: center;
  }
  .h5subjectsBoxs {
    display: flex;
    flex-direction: column;
  }
  .subiectsList {
    overflow-y: auto;
    padding: 0 10px;
    height: calc(100vh - 100px); // 设置滚动容器高度
  }
  .subiectsList_boxs {
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    //   display: flex;
    padding: 15px;
    box-sizing: border-box;
    //   display: flex;
    align-items: center;
    margin: 10px 0;
    .subiectsList_boxs_text {
      width: 100%;
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 隐藏超出的内容 */
      text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
      font-size: 16px;
      font-weight: 500;
    }
  }
  .right_icons_list {
    display: flex;
    .right_icons_list_item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 28px;
      height: 28px;
      background-color: rgba(210, 248, 231, 1);
      border-radius: 50%;
      margin: 0 5px;
    }
    .item_icon {
      color: rgba(73, 185, 173, 1);
      font-size: 15px;
    }
    .right_icons_list_item2 {
      background-color: rgb(248, 211, 210);
    }
    .item_icon2 {
      color: rgb(185, 58, 41);
    }
  }
  .loading-text {
    text-align: center;
    padding: 10px;
    color: #999;
    font-size: 12px;
  }
  
  .addViewstop {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 70px;
    color: rgba(17, 20, 31, 1);
    font-size: 14px;
    font-weight: 500;
    span {
      width: 14px;
      height: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(210, 248, 231, 1);
      color: rgba(73, 185, 173, 1);
      font-size: 14px;
      margin-left: 5px;
    }
  }
  .subiectsList_boxs_twos {
    width: 100%;
    display: flex;
    .subiectsList_boxs_text {
      font-size: 16px;
    }
    .subiectsList_boxs_mobile {
      font-size: 12px;
      color: rgba(79, 85, 103, 1);
    }
  }
  .subiectsList_boxs_ones {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 10px;
  }
  
  .listfooter {
    display: flex;
    font-size: 10px;
    .listfooter_view {
      margin: 10px 10px;
      margin-bottom: 0;
      .listfooter_view_tag {
        background-color: rgba(79, 85, 103, 0.06);
        padding: 1px 0;
        color: rgba(79, 85, 103, 1);
      }
    }
  }
  .cut {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    align-items: center; 
    .cut_text_one {
      font-size: 16px;
      
      font-weight: 500;
      color: rgba(17, 20, 31, 1);
    }
    .cut_sw {
      background-color: #fff;
      border-radius: 50px;
      width: 100px;
      padding: 5px;
      height: 33px;
      box-sizing: border-box;
      display: flex;
      .cut_sw_no {
        width: 50%;
        font-size: 12px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        color: rgba(181, 181, 181, 1);
      }
      .cut_sw_ok {
        background-color: rgba(73, 185, 173, 1);
        color: #fff;
      }
    }
  }
  </style>